<template>
  <div class="tencent-map-main">
    <iframe id="mapPage" width="100%" height="100%" frameborder="0" :src="tencentMapSrc" />
  </div>
</template>

<script>
export default {
  props: {
    tencentMapSrc: {
      require: false,
      type: String,
      default: 'https://apis.map.qq.com/tools/locpicker?coord=113.403181,23.163261&search=1&type=1&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&referer=myapp&zoom=18'
    }
  },
  data() {
    return {}
  },
  computed: {
  },
  watch: {
  },
  created() {
  },
  mounted() {
    const that = this
    window.addEventListener(
      'message',
      function(event) { // 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
        const loc = event.data
        if (loc && loc.module === 'locationPicker') { // 防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
          that.$emit('getPackingLocation', loc)
        }
      },
      false
    )
  },
  destroyed() {
  },
  methods: {

  }
}
</script>

<style scoped lang="scss">
.tencent-map-main {
  width: 100%;
  height: 100%;
  padding: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style>
